<!DOCTYPE html>
<!-- saved from url=(0060)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/12-1.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>随机图片滚动</title>
	<style>
		html, body, ul {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		ul {
			width: 220px;
			margin: 50px auto;
		}
		li {
			display: inline-block;
			width: 100px;
			height: 50px;
			font-size: 0;
			overflow: hidden;
			position: relative;
		}
		div {
			position: absolute;
			top: 0px;
			left: 0;
		}
	</style>
<script src="./随机图片滚动_files/miaov.js"></script>
<script>
window.onload = function(){

	var aLi = document.getElementsByTagName('li'),
		flag = 0;

	for(var i=0; i<aLi.length; i++){
		fnSlide(aLi[i]);
	}

	function fnSlide(li){
		var oDiv = li.getElementsByTagName('div')[0];
		function fnSlideOnce(){
			setTimeout(function(){
				flag = flag == 0 ? -50 : 0;
				doMove(oDiv, 'top', 10, flag, fnSlideOnce);
			}, Math.round(Math.random() * 2000 + 1000));
		}
		fnSlideOnce();				
	}
}
</script>
</head>
<body>
	<ul>
		<li>
			<div style="top: -50px;"><img src="./随机图片滚动_files/1.jpg"><img src="./随机图片滚动_files/2.jpg"></div>
		</li>
		<li>
			<div style="top: 0px;"><img src="./随机图片滚动_files/3.jpg"><img src="./随机图片滚动_files/4.jpg"></div>
		</li>
		<li>
			<div style="top: 0px;"><img src="./随机图片滚动_files/5.jpg"><img src="./随机图片滚动_files/6.jpg"></div>
		</li>
		<li>
			<div style="top: -50px;"><img src="./随机图片滚动_files/7.jpg"><img src="./随机图片滚动_files/8.jpg"></div>
		</li>
		<li>
			<div style="top: 0px;"><img src="./随机图片滚动_files/9.jpg"><img src="./随机图片滚动_files/10.jpg"></div>
		</li>
		<li>
			<div style="top: 0px;"><img src="./随机图片滚动_files/11.jpg"><img src="./随机图片滚动_files/12.jpg"></div>
		</li>
		<li>
			<div style="top: -50px;"><img src="./随机图片滚动_files/13.jpg"><img src="./随机图片滚动_files/14.jpg"></div>
		</li>
		<li>
			<div style="top: -10px;"><img src="./随机图片滚动_files/15.jpg"><img src="./随机图片滚动_files/16.jpg"></div>
		</li>
	</ul>

<div id="__nightingale_view_cover" style="width: 100%; height: 100%; transition: -webkit-transform 10s ease-in-out; position: fixed !important; left: 0px !important; bottom: 0px !important; overflow: hidden !important; pointer-events: none !important; z-index: 2147483647; opacity: 0; background: rgb(0, 0, 0) !important;"></div></body></html>